<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Desenhando na canvas</title>
<script language="javascript">
			// Last updated November 2010 by Simon Sarris
			// www.simonsarris.com
			// sarris@acm.org
			//
			// Free to use and distribute at will
			// So long as you are nice to people, etc

			// This is a self-executing function that I added only to stop this
			// new script from interfering with the old one. It's a good idea in general, but not
			// something I wanted to go over during this tutorial
			(function(window) {

				var ws = new WebSocket('ws://192.168.0.34:8080/TesteWebSocket/mapa/123asd');

				ws.onopen = function() {
				  console.log('Conexão aberta com sucesso');
				};
				 
				ws.onmessage = function(message) {
				  /* var slide = document.getElementById(message);
				  mostrarSlide(slide); */
				  var json = eval("("+message.data+")");
				  //alert(json);
				  if(json.type == 'novo') {
					  //alert(json.x+' '+json.y+' '+json.w+' '+json.h+' '+json.cor);
					  addRect(json.x, json.y, json.w, json.h, json.cor, false);
					  //addRect(360, 70, 50, 50, 'rgba(0,205,0,0.7)', false);
				  } else if(json.type == 'mover') {
					  mySel = boxes2[json.id];
					  mySel.x = json.x;
					  mySel.y = json.y;
					  invalidate();
				  } else if(json.type == 'tamanho') {
					  mySel = boxes2[json.id];
					  mySel.x = json.x;
					  mySel.y = json.y;
					  mySel.w = json.w;
					  mySel.h = json.h;
					  invalidate();
				  }
				};
				
				
			// holds all our boxes
			var boxes2 = []; 

			// New, holds the 8 tiny boxes that will be our selection handles
			// the selection handles will be in this order:
			// 0  1  2
			// 3     4
			// 5  6  7
			var selectionHandles = [];

			// Hold canvas information
			var canvas;
			var ctx;
			var WIDTH;
			var HEIGHT;
			var INTERVAL = 20;  // how often, in milliseconds, we check to see if a redraw is needed

			var isDrag = false;
			var isResizeDrag = false;
			var expectResize = -1; // New, will save the # of the selection handle if the mouse is over one.
			var mx, my; // mouse coordinates

			 // when set to true, the canvas will redraw everything
			 // invalidate() just sets this to false right now
			 // we want to call invalidate() whenever we make a change
			var canvasValid = false;

			// The node (if any) being selected.
			// If in the future we want to select multiple objects, this will get turned into an array
			var mySel = null;

			// The selection color and width. Right now we have a red selection with a small width
			var mySelColor = '#CC0000';
			var mySelWidth = 2;
			var mySelBoxColor = 'darkred'; // New for selection boxes
			var mySelBoxSize = 6;
			var indice;

			// we use a fake canvas to draw individual shapes for selection testing
			var ghostcanvas;
			var gctx; // fake canvas context

			// since we can drag from anywhere in a node
			// instead of just its x/y corner, we need to save
			// the offset of the mouse when we start dragging.
			var offsetx, offsety;

			// Padding and border style widths for mouse offsets
			var stylePaddingLeft, stylePaddingTop, styleBorderLeft, styleBorderTop;




			// Box object to hold data
			function Box2() {
			  this.x = 0;
			  this.y = 0;
			  this.w = 1; // default width and height?
			  this.h = 1;
			  this.fill = '#444444';
			}

			// New methods on the Box class
			Box2.prototype = {
			  // we used to have a solo draw function
			  // but now each box is responsible for its own drawing
			  // mainDraw() will call this with the normal canvas
			  // myDown will call this with the ghost canvas with 'black'
			  draw: function(context, optionalColor) {
				  if (context === gctx) {
					context.fillStyle = 'black'; // always want black for the ghost canvas
				  } else {
					context.fillStyle = this.fill;
				  }
				  
				  // We can skip the drawing of elements that have moved off the screen:
				  if (this.x > WIDTH || this.y > HEIGHT) return; 
				  if (this.x + this.w < 0 || this.y + this.h < 0) return;
				  
				  context.fillRect(this.x,this.y,this.w,this.h);
				  
				// draw selection
				// this is a stroke along the box and also 8 new selection handles
				if (mySel === this) {
				  context.strokeStyle = mySelColor;
				  context.lineWidth = mySelWidth;
				  context.strokeRect(this.x,this.y,this.w,this.h);
				  
				  // draw the boxes
				  
				  var half = mySelBoxSize / 2;
				  
				  // 0  1  2
				  // 3     4
				  // 5  6  7
				  
				  // top left, middle, right
				  selectionHandles[0].x = this.x-half;
				  selectionHandles[0].y = this.y-half;
				  
				  selectionHandles[1].x = this.x+this.w/2-half;
				  selectionHandles[1].y = this.y-half;
				  
				  selectionHandles[2].x = this.x+this.w-half;
				  selectionHandles[2].y = this.y-half;
				  
				  //middle left
				  selectionHandles[3].x = this.x-half;
				  selectionHandles[3].y = this.y+this.h/2-half;
				  
				  //middle right
				  selectionHandles[4].x = this.x+this.w-half;
				  selectionHandles[4].y = this.y+this.h/2-half;
				  
				  //bottom left, middle, right
				  selectionHandles[6].x = this.x+this.w/2-half;
				  selectionHandles[6].y = this.y+this.h-half;
				  
				  selectionHandles[5].x = this.x-half;
				  selectionHandles[5].y = this.y+this.h-half;
				  
				  selectionHandles[7].x = this.x+this.w-half;
				  selectionHandles[7].y = this.y+this.h-half;

				  
				  context.fillStyle = mySelBoxColor;
				  for (var i = 0; i < 8; i ++) {
					var cur = selectionHandles[i];
					context.fillRect(cur.x, cur.y, mySelBoxSize, mySelBoxSize);
				  }
				}
				
			  } // end draw

			}

			//Initialize a new Box, add it, and invalidate the canvas
			function addRect(x, y, w, h, fill, sendMessage) {
			  var resto = x % 50;
			  if(resto > 25) {
				x += (50 - resto);
			  } else {
				x -= resto;
			  }
			  
			  resto = y % 50;
			  if(resto > 25) {
				y += (50 - resto);
			  } else {
				y -= resto;
			  }
			  
			  var rect = new Box2;
			  rect.x = x;
			  rect.y = y;
			  rect.w = w
			  rect.h = h;
			  rect.fill = fill;
			  boxes2.push(rect);
			  invalidate();
			  
			  if(sendMessage) {
				  var json = '{ "type" : "novo", "x" : ' + x + ', "y" : ' + y + ', "w" : ' + w + ', "h" : ' + h + ', "cor" : "' + fill + '" }';
				  ws.send(json);
			  }
			}

			// initialize our canvas, add a ghost canvas, set draw loop
			// then add everything we want to intially exist on the canvas
			function init2() {
			  canvas = document.getElementById('canvas2');
			  HEIGHT = canvas.height;
			  WIDTH = canvas.width;
			  ctx = canvas.getContext('2d');
			  ghostcanvas = document.createElement('canvas');
			  ghostcanvas.height = HEIGHT;
			  ghostcanvas.width = WIDTH;
			  ghostcanvas.id = "canvas";
			  gctx = ghostcanvas.getContext('2d');
			  
			  //fixes a problem where double clicking causes text to get selected on the canvas
			  canvas.onselectstart = function () { return false; }
			  
			  // fixes mouse co-ordinate problems when there's a border or padding
			  // see getMouse for more detail
			  if (document.defaultView && document.defaultView.getComputedStyle) {
				stylePaddingLeft = parseInt(document.defaultView.getComputedStyle(canvas, null)['paddingLeft'], 10)     || 0;
				stylePaddingTop  = parseInt(document.defaultView.getComputedStyle(canvas, null)['paddingTop'], 10)      || 0;
				styleBorderLeft  = parseInt(document.defaultView.getComputedStyle(canvas, null)['borderLeftWidth'], 10) || 0;
				styleBorderTop   = parseInt(document.defaultView.getComputedStyle(canvas, null)['borderTopWidth'], 10)  || 0;
			  }
			  
			  // make mainDraw() fire every INTERVAL milliseconds
			  setInterval(mainDraw, INTERVAL);
			  
			  // set our events. Up and down are for dragging,
			  // double click is for making new boxes
			  canvas.onmousedown = myDown;
			  canvas.onmouseup = myUp;
			  canvas.ondblclick = myDblClick;
			  canvas.onmousemove = myMove;
			  
			  // set up the selection handle boxes
			  for (var i = 0; i < 8; i ++) {
				var rect = new Box2;
				selectionHandles.push(rect);
			  }
			  
			  // add custom initialization here:
			  
			  // add a large green rectangle
			  addRect(260, 70, 50, 50, 'rgba(0,205,0,0.7)', false);
			  
			  // add a green-blue rectangle
			  addRect(240, 120, 50, 50, 'rgba(2,165,165,0.7)', false);  
			  
			  // add a smaller purple rectangle
			  addRect(45, 60, 50, 50, 'rgba(150,150,250,0.7)', false);
			}


			//wipes the canvas context
			function clear(c) {
			  c.clearRect(0, 0, WIDTH, HEIGHT);
			  buildGrids(50, "#EEEEEE", 50, canvas);
			}

			// Main draw loop.
			// While draw is called as often as the INTERVAL variable demands,
			// It only ever does something if the canvas gets invalidated by our code
			function mainDraw() {
			  if (canvasValid == false) {
				clear(ctx);
				
				// Add stuff you want drawn in the background all the time here
				
				// draw all boxes
				var l = boxes2.length;
				for (var i = 0; i < l; i++) {
				  boxes2[i].draw(ctx); // we used to call drawshape, but now each box draws itself
				}
				
				// Add stuff you want drawn on top all the time here
				
				canvasValid = true;
			  }
			}

			// Happens when the mouse is moving inside the canvas
			function myMove(e){
				var oldx = mySel.x;
				var oldy = mySel.y;
				var oldh = mySel.h;
				var oldw = mySel.w;
				
		  	 	if (isDrag) {
					getMouse(e);
					
					mySel.x = mx - offsetx;
					var resto = mySel.x % 50;
				    if(resto > 25) {
					  //mySel.x = mx - offsetx;
					  mySel.x += (50 - resto);
				    } else {
				      //mySel.x = mx - offsetx;				  
					  mySel.x -= (resto);
				    }
					
					mySel.y = my - offsety;  
					resto = mySel.y % 50;
				    if(resto > 25) {
					  //mySel.x = mx - offsetx;
					  mySel.y += (50 - resto);
				    } else {
				      //mySel.x = mx - offsetx;				  
					  mySel.y -= (resto);
				    }
				    
					invalidate();
					if(mySel.x != oldx || mySel.y != oldy ) {
					    var json = '{ "type" : "mover", "x" : ' + mySel.x + ', "y" : ' + mySel.y + ', "id" : ' + indice + ' }';
					    ws.send(json);
				    }
					
					//alert(mySel.x);
					
					// something is changing position so we better invalidate the canvas!
				  } else if (isResizeDrag) {
					// time ro resize!
					//var oldx = mySel.x;
					//var oldy = mySel.y;
					
					// 0  1  2
					// 3     4
					// 5  6  7
					switch (expectResize) {
					  case 0:
						mySel.x = mx;
						mySel.y = my;
						mySel.w += oldx - mx;
						mySel.h += oldy - my;
						break;
					  case 1:
						mySel.y = my;
						mySel.h += oldy - my;
						break;
					  case 2:
						mySel.y = my;
						mySel.w = mx - oldx;
						mySel.h += oldy - my;
						break;
					  case 3:
						mySel.x = mx;
						mySel.w += oldx - mx;
						break;
					  case 4:
						mySel.w = mx - oldx;
						break;
					  case 5:
						mySel.x = mx;
						mySel.w += oldx - mx;
						mySel.h = my - oldy;
						break;
					  case 6:
						mySel.h = my - oldy;
						break;
					  case 7:
						mySel.w = mx - oldx;
						mySel.h = my - oldy;
						break;
					}
					
					var resto = mySel.w % 50;
				    if(resto > 25) {
					  mySel.w += (50 - resto);
				    } else {
				      mySel.w -= (resto);
				    }
					
					resto = mySel.h % 50;
				    if(resto > 25) {
					  mySel.h += (50 - resto);
				    } else {
				      mySel.h -= (resto);
				    }
				    
				    resto = mySel.x % 50;
				    if(resto > 25) {
					  mySel.x += (50 - resto);
				    } else {
				      mySel.x -= (resto);
				    }
					
					resto = mySel.y % 50;
				    if(resto > 25) {
					  mySel.y += (50 - resto);
				    } else {
				      mySel.y -= (resto);
				    }
					
					invalidate();
					
					if(mySel.x != oldx || mySel.y != oldy || mySel.w != oldw || mySel.h != oldh) {
						var json = '{ "type" : "tamanho", "x" : ' + mySel.x + ', "y" : ' + mySel.y + ', "w" : ' + mySel.w + ', "h" : ' + mySel.h + ', "id" : ' + indice + ' }';
					    ws.send(json);
					}
				  }
				  
				  getMouse(e);
				  // if there's a selection see if we grabbed one of the selection handles
				  if (mySel !== null && !isResizeDrag) {
					for (var i = 0; i < 8; i++) {
					  // 0  1  2
					  // 3     4
					  // 5  6  7
					  
					  var cur = selectionHandles[i];
					  
					  // we dont need to use the ghost context because
					  // selection handles will always be rectangles
					  if (mx >= cur.x && mx <= cur.x + mySelBoxSize &&
						  my >= cur.y && my <= cur.y + mySelBoxSize) {
						// we found one!
						expectResize = i;
						invalidate();
						
						switch (i) {
						  case 0:
							this.style.cursor='nw-resize';
							break;
						  case 1:
							this.style.cursor='n-resize';
							break;
						  case 2:
							this.style.cursor='ne-resize';
							break;
						  case 3:
							this.style.cursor='w-resize';
							break;
						  case 4:
							this.style.cursor='e-resize';
							break;
						  case 5:
							this.style.cursor='sw-resize';
							break;
						  case 6:
							this.style.cursor='s-resize';
							break;
						  case 7:
							this.style.cursor='se-resize';
							break;
						}
						return;
					  }
					  
					}
					// not over a selection box, return to normal
					isResizeDrag = false;
					expectResize = -1;
					this.style.cursor='auto';
				  }
				  
			}

			// Happens when the mouse is clicked in the canvas
			function myDown(e){
			  getMouse(e);
			  
			  //we are over a selection box
			  if (expectResize !== -1) {
				isResizeDrag = true;
				return;
			  }
			  
			  clear(gctx);
			  var l = boxes2.length;
			  for (var i = l-1; i >= 0; i--) {
				// draw shape onto ghost context
				boxes2[i].draw(gctx, 'black');
				
				// get image data at the mouse x,y pixel
				var imageData = gctx.getImageData(mx, my, 1, 1);
				var index = (mx + my * imageData.width) * 4;
				
				// if the mouse pixel exists, select and break
				if (imageData.data[3] > 0) {
				  mySel = boxes2[i];
				  indice = i;
				  offsetx = mx - mySel.x;
				  offsety = my - mySel.y;
				  mySel.x = mx - offsetx;
				  mySel.y = my - offsety;
				  isDrag = true;
				  
				  invalidate();
				  clear(gctx);
				  return;
				}
				
			  }
			  // havent returned means we have selected nothing
			  mySel = null;
			  // clear the ghost canvas for next time
			  clear(gctx);
			  // invalidate because we might need the selection border to disappear
			  invalidate();
			}

			function myUp(){
			  isDrag = false;
			  isResizeDrag = false;
			  expectResize = -1;
			}

			// adds a new node
			function myDblClick(e) {
			  getMouse(e);
			  // for this method width and height determine the starting X and Y, too.
			  // so I left them as vars in case someone wanted to make them args for something and copy this code
			  var width = 50;
			  var height = 50;
			  addRect(mx - (width / 2), my - (height / 2), width, height, 'rgba(220,205,65,0.7)', true);
			}


			function invalidate() {
			  canvasValid = false;
			}

			// Sets mx,my to the mouse position relative to the canvas
			// unfortunately this can be tricky, we have to worry about padding and borders
			function getMouse(e) {
				  var element = canvas, offsetX = 0, offsetY = 0;

				  if (element.offsetParent) {
					do {
					  offsetX += element.offsetLeft;
					  offsetY += element.offsetTop;
					} while ((element = element.offsetParent));
				  }

				  // Add padding and border style widths to offset
				  offsetX += stylePaddingLeft;
				  offsetY += stylePaddingTop;

				  offsetX += styleBorderLeft;
				  offsetY += styleBorderTop;

				  mx = e.pageX - offsetX;
				  my = e.pageY - offsetY
			}
			
			function buildGrids(gridPixelSize, color, gap, canvas)	{
				var canvas3 = canvas;
				//var ctx = canvas3.getContext("2d");
				 
				ctx.lineWidth = 0.5;
				ctx.strokeStyle = color;
				 
				 
				// horizontal grid lines
				for(var i = 0; i <= canvas3.height; i = i + gridPixelSize) {
					ctx.beginPath();
					ctx.moveTo(0, i);
					ctx.lineTo(canvas3.width, i);
					if(i % parseInt(gap) == 0) {
						ctx.lineWidth = 2;
					} else {
						ctx.lineWidth = 0.5;
					}
					ctx.closePath();
					ctx.stroke();
				}
				 
				// vertical grid lines
				for(var j = 0; j <= canvas3.width; j = j + gridPixelSize) {
					ctx.beginPath();
					ctx.moveTo(j, 0);
					ctx.lineTo(j, canvas3.height);
					if(j % parseInt(gap) == 0) {
						ctx.lineWidth = 2;
					} else {
						ctx.lineWidth = 0.5;
					}
					ctx.closePath();
					ctx.stroke();
				}
			}
			 
			// If you dont want to use <body onLoad='init()'>
			// You could uncomment this init() reference and place the script reference inside the body tag
			//init();
			window.init2 = init2;
			})(window);

		</script>

<style type="text/css">
#canvas2 {
	border: 1px solid #000;
}

.col-md-2 {
	border: 1px solid #000;
}
</style>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />

<!-- Optional theme -->
<link rel="stylesheet" href="bootstrap/css/bootstrap-theme.min.css" />

<!-- Latest compiled and minified JavaScript -->
<script src="bootstrap/js/bootstrap.min.js"></script>
</head>

<body onload="init2()">
	<div class="row">
		<div class="col-md-2 sidebar">
			<ul class="nav nav-sidebar">
				<li class="active"><a href="#">Overview</a></li>
				<li><a href="#">Reports</a></li>
				<li><a href="#">Analytics</a></li>
				<li><a href="#">Export</a></li>
			</ul>
		</div>
		<div class="col-md-8">
			<canvas id="canvas2" width="900" height="500">
				This text is displayed if your browser does not support HTML5 Canvas.
				</canvas>
		</div>
		<div class="col-md-2">asdasdasdasd</div>
	</div>
	<div class="row">
		<div class="col-md-1">.col-md-1</div>
		<div class="col-md-1">.col-md-1</div>
		<div class="col-md-1">.col-md-1</div>
		<div class="col-md-1">.col-md-1</div>
		<div class="col-md-1">.col-md-1</div>
		<div class="col-md-1">.col-md-1</div>
		<div class="col-md-1">.col-md-1</div>
		<div class="col-md-1">.col-md-1</div>
		<div class="col-md-1">.col-md-1</div>
		<div class="col-md-1">.col-md-1</div>
		<div class="col-md-1">.col-md-1</div>
		<div class="col-md-1">.col-md-1</div>
	</div>
</body>
</html>